
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quancha"></use>
                    </svg>
                    <div class="name">圈叉</div>
                    <div class="fontclass">#icon-quancha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinggao1"></use>
                    </svg>
                    <div class="name">分期－警告</div>
                    <div class="fontclass">#icon-jinggao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinhang"></use>
                    </svg>
                    <div class="name">银行</div>
                    <div class="fontclass">#icon-yinhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-warning"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#icon-warning</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili1"></use>
                    </svg>
                    <div class="name">日历1</div>
                    <div class="fontclass">#icon-rili1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-fujian"></use>
                    </svg>
                    <div class="name">icon-附件</div>
                    <div class="fontclass">#icon-icon-fujian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-shangchuan"></use>
                    </svg>
                    <div class="name">icon-上传</div>
                    <div class="fontclass">#icon-icon-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-canzhao"></use>
                    </svg>
                    <div class="name">icon-参照</div>
                    <div class="fontclass">#icon-icon-canzhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu2"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zengjia"></use>
                    </svg>
                    <div class="name">增加</div>
                    <div class="fontclass">#icon-zengjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biangengjilu"></use>
                    </svg>
                    <div class="name">变更记录</div>
                    <div class="fontclass">#icon-biangengjilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daitiqu"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-daitiqu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Fill"></use>
                    </svg>
                    <div class="name">Fill 1</div>
                    <div class="fontclass">#icon-Fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Fill1"></use>
                    </svg>
                    <div class="name">Fill 2</div>
                    <div class="fontclass">#icon-Fill1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouzuo"></use>
                    </svg>
                    <div class="name">箭头左</div>
                    <div class="fontclass">#icon-jiantouzuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouyou"></use>
                    </svg>
                    <div class="name">箭头右</div>
                    <div class="fontclass">#icon-jiantouyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duoxuan123"></use>
                    </svg>
                    <div class="name">多选2</div>
                    <div class="fontclass">#icon-duoxuan123</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duoxuan1"></use>
                    </svg>
                    <div class="name">多选1</div>
                    <div class="fontclass">#icon-duoxuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouxia1"></use>
                    </svg>
                    <div class="name">箭头下</div>
                    <div class="fontclass">#icon-jiantouxia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantoushang1"></use>
                    </svg>
                    <div class="name">箭头上</div>
                    <div class="fontclass">#icon-jiantoushang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shibai"></use>
                    </svg>
                    <div class="name">失败</div>
                    <div class="fontclass">#icon-shibai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tixing"></use>
                    </svg>
                    <div class="name">提醒</div>
                    <div class="fontclass">#icon-tixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wancheng"></use>
                    </svg>
                    <div class="name">完成</div>
                    <div class="fontclass">#icon-wancheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuyi1"></use>
                    </svg>
                    <div class="name">注意</div>
                    <div class="fontclass">#icon-zhuyi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingkong"></use>
                    </svg>
                    <div class="name">清空</div>
                    <div class="fontclass">#icon-qingkong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanfujian"></use>
                    </svg>
                    <div class="name">上传附件</div>
                    <div class="fontclass">#icon-shangchuanfujian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiayingyong"></use>
                    </svg>
                    <div class="name">添加应用</div>
                    <div class="fontclass">#icon-tianjiayingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinggao"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#icon-jinggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shituliebiaoqiehuan"></use>
                    </svg>
                    <div class="name">视图列表切换</div>
                    <div class="fontclass">#icon-shituliebiaoqiehuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shu_zk"></use>
                    </svg>
                    <div class="name">树1</div>
                    <div class="fontclass">#icon-shu_zk</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxuan-xuanzhong"></use>
                    </svg>
                    <div class="name">单选-选中</div>
                    <div class="fontclass">#icon-danxuan-xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxuan-weixuan"></use>
                    </svg>
                    <div class="name">单选-未选</div>
                    <div class="fontclass">#icon-danxuan-weixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuxiao"></use>
                    </svg>
                    <div class="name">注销</div>
                    <div class="fontclass">#icon-zhuxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanbuyingyong"></use>
                    </svg>
                    <div class="name">全部应用</div>
                    <div class="fontclass">#icon-quanbuyingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mianbaoxie"></use>
                    </svg>
                    <div class="name">面包屑</div>
                    <div class="fontclass">#icon-mianbaoxie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuye"></use>
                    </svg>
                    <div class="name">主页</div>
                    <div class="fontclass">#icon-zhuye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaiguan-kai"></use>
                    </svg>
                    <div class="name"> 快关-开</div>
                    <div class="fontclass">#icon-kuaiguan-kai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaiguan-kai-jinyong"></use>
                    </svg>
                    <div class="name">开关-开-禁用</div>
                    <div class="fontclass">#icon-kaiguan-kai-jinyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaiguan-guan2"></use>
                    </svg>
                    <div class="name">开关-关</div>
                    <div class="fontclass">#icon-kaiguan-guan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaiguan-guan-jinyong"></use>
                    </svg>
                    <div class="name">开关-关-禁用</div>
                    <div class="fontclass">#icon-kaiguan-guan-jinyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shituqiehuan"></use>
                    </svg>
                    <div class="name">视图切换2</div>
                    <div class="fontclass">#icon-shituqiehuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhutishi"></use>
                    </svg>
                    <div class="name">帮助提示</div>
                    <div class="fontclass">#icon-bangzhutishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loucengsuolvetu"></use>
                    </svg>
                    <div class="name">楼层缩略图</div>
                    <div class="fontclass">#icon-loucengsuolvetu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loucengtubiao"></use>
                    </svg>
                    <div class="name">楼层图标</div>
                    <div class="fontclass">#icon-loucengtubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyiye"></use>
                    </svg>
                    <div class="name">上一页</div>
                    <div class="fontclass">#icon-shangyiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayiye"></use>
                    </svg>
                    <div class="name">下一页</div>
                    <div class="fontclass">#icon-xiayiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenku"></use>
                    </svg>
                    <div class="name">文库</div>
                    <div class="fontclass">#icon-wenku</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toupiao"></use>
                    </svg>
                    <div class="name">投票</div>
                    <div class="fontclass">#icon-toupiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rizhi"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-rizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinzifafang"></use>
                    </svg>
                    <div class="name">薪资发放</div>
                    <div class="fontclass">#icon-xinzifafang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huati"></use>
                    </svg>
                    <div class="name">话题</div>
                    <div class="fontclass">#icon-huati</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhiguanli"></use>
                    </svg>
                    <div class="name">组织管理</div>
                    <div class="fontclass">#icon-zuzhiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaqin"></use>
                    </svg>
                    <div class="name">假勤</div>
                    <div class="fontclass">#icon-jiaqin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanyou"></use>
                    </svg>
                    <div class="name">切换右</div>
                    <div class="fontclass">#icon-qiehuanyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianjiyou"></use>
                    </svg>
                    <div class="name">点击右</div>
                    <div class="fontclass">#icon-dianjiyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianjizuo"></use>
                    </svg>
                    <div class="name">点击左</div>
                    <div class="fontclass">#icon-dianjizuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanzuo"></use>
                    </svg>
                    <div class="name">切换左</div>
                    <div class="fontclass">#icon-qiehuanzuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fujianshenpi"></use>
                    </svg>
                    <div class="name">附件（审批）</div>
                    <div class="fontclass">#icon-fujianshenpi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpiliucheng"></use>
                    </svg>
                    <div class="name">审批流程</div>
                    <div class="fontclass">#icon-shenpiliucheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpitongguo"></use>
                    </svg>
                    <div class="name">审批通过</div>
                    <div class="fontclass">#icon-shenpitongguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpibohui"></use>
                    </svg>
                    <div class="name">审批驳回</div>
                    <div class="fontclass">#icon-shenpibohui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yidu"></use>
                    </svg>
                    <div class="name">已读</div>
                    <div class="fontclass">#icon-yidu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yewuchuli"></use>
                    </svg>
                    <div class="name">业务处理</div>
                    <div class="fontclass">#icon-yewuchuli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liucheng"></use>
                    </svg>
                    <div class="name">流程3</div>
                    <div class="fontclass">#icon-liucheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liucheng1"></use>
                    </svg>
                    <div class="name">流程2</div>
                    <div class="fontclass">#icon-liucheng1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tijiaoren"></use>
                    </svg>
                    <div class="name">提交人</div>
                    <div class="fontclass">#icon-tijiaoren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liucheng2"></use>
                    </svg>
                    <div class="name">流程1</div>
                    <div class="fontclass">#icon-liucheng2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-canzhao"></use>
                    </svg>
                    <div class="name">参照</div>
                    <div class="fontclass">#icon-canzhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gundongxiangxia"></use>
                    </svg>
                    <div class="name">滚动向下</div>
                    <div class="fontclass">#icon-gundongxiangxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                    <div class="name">删除2</div>
                    <div class="fontclass">#icon-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quxiao"></use>
                    </svg>
                    <div class="name">取消</div>
                    <div class="fontclass">#icon-quxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-queding"></use>
                    </svg>
                    <div class="name">确定</div>
                    <div class="fontclass">#icon-queding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingzhuang"></use>
                    </svg>
                    <div class="name">形状</div>
                    <div class="fontclass">#icon-xingzhuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Group"></use>
                    </svg>
                    <div class="name">视图</div>
                    <div class="fontclass">#icon-Group</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duplicate"></use>
                    </svg>
                    <div class="name">duplicate</div>
                    <div class="fontclass">#icon-duplicate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gear"></use>
                    </svg>
                    <div class="name">gear</div>
                    <div class="fontclass">#icon-gear</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuoliu"></use>
                    </svg>
                    <div class="name">工作流</div>
                    <div class="fontclass">#icon-gongzuoliu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpixiangqing"></use>
                    </svg>
                    <div class="name">审批详情</div>
                    <div class="fontclass">#icon-shenpixiangqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hangcaozuoxiangshang1"></use>
                    </svg>
                    <div class="name">行操作向上</div>
                    <div class="fontclass">#icon-hangcaozuoxiangshang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hangcaozuoxiala1"></use>
                    </svg>
                    <div class="name">行操作下拉</div>
                    <div class="fontclass">#icon-hangcaozuoxiala1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianjiadakai"></use>
                    </svg>
                    <div class="name">文件夹打开</div>
                    <div class="fontclass">#icon-wenjianjiadakai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan1"></use>
                    </svg>
                    <div class="name">上传2</div>
                    <div class="fontclass">#icon-shangchuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">right</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bottom"></use>
                    </svg>
                    <div class="name">bottom</div>
                    <div class="fontclass">#icon-bottom</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuwenjianshouqi"></use>
                    </svg>
                    <div class="name">树文件收起</div>
                    <div class="fontclass">#icon-shuwenjianshouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuwenjianzhankai"></use>
                    </svg>
                    <div class="name">树文件展开</div>
                    <div class="fontclass">#icon-shuwenjianzhankai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shushouqi"></use>
                    </svg>
                    <div class="name">树展开</div>
                    <div class="fontclass">#icon-shushouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin1"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuixiaohua"></use>
                    </svg>
                    <div class="name">最小化</div>
                    <div class="fontclass">#icon-zuixiaohua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuidahua"></use>
                    </svg>
                    <div class="name">最大化</div>
                    <div class="fontclass">#icon-zuidahua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-celashouqi"></use>
                    </svg>
                    <div class="name">侧拉收起</div>
                    <div class="fontclass">#icon-celashouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhuishangyiji"></use>
                    </svg>
                    <div class="name">返回上一级</div>
                    <div class="fontclass">#icon-fanhuishangyiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guize"></use>
                    </svg>
                    <div class="name">规则</div>
                    <div class="fontclass">#icon-guize</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kemu"></use>
                    </svg>
                    <div class="name">科目</div>
                    <div class="fontclass">#icon-kemu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duoxuan"></use>
                    </svg>
                    <div class="name">多选2</div>
                    <div class="fontclass">#icon-duoxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili-jin"></use>
                    </svg>
                    <div class="name">日历-今</div>
                    <div class="fontclass">#icon-rili-jin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaishi1"></use>
                    </svg>
                    <div class="name">开始</div>
                    <div class="fontclass">#icon-kaishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shaixuan"></use>
                    </svg>
                    <div class="name">筛选</div>
                    <div class="fontclass">#icon-shaixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangxu"></use>
                    </svg>
                    <div class="name">降序</div>
                    <div class="fontclass">#icon-jiangxu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengxu"></use>
                    </svg>
                    <div class="name">升序</div>
                    <div class="fontclass">#icon-shengxu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuodong"></use>
                    </svg>
                    <div class="name">拖动</div>
                    <div class="fontclass">#icon-tuodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi_up"></use>
                    </svg>
                    <div class="name">peizhi_up</div>
                    <div class="fontclass">#icon-peizhi_up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi_down"></use>
                    </svg>
                    <div class="name">peizhi_down</div>
                    <div class="fontclass">#icon-peizhi_down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi_tianjia"></use>
                    </svg>
                    <div class="name">peizhi_tianjia</div>
                    <div class="fontclass">#icon-peizhi_tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi_yixuan"></use>
                    </svg>
                    <div class="name">peizhi_yixuan</div>
                    <div class="fontclass">#icon-peizhi_yixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xx-chakanxiangqing"></use>
                    </svg>
                    <div class="name">xx-查看详情</div>
                    <div class="fontclass">#icon-xx-chakanxiangqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaxun-hanshu"></use>
                    </svg>
                    <div class="name">查询-函数</div>
                    <div class="fontclass">#icon-chaxun-hanshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yujing"></use>
                    </svg>
                    <div class="name">预警</div>
                    <div class="fontclass">#icon-yujing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghuzu"></use>
                    </svg>
                    <div class="name">用户组</div>
                    <div class="fontclass">#icon-yonghuzu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhankai"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-zhankai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouqi"></use>
                    </svg>
                    <div class="name">收起</div>
                    <div class="fontclass">#icon-shouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yewudanyuan"></use>
                    </svg>
                    <div class="name">业务单元</div>
                    <div class="fontclass">#icon-yewudanyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumen"></use>
                    </svg>
                    <div class="name">部门</div>
                    <div class="fontclass">#icon-bumen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jituan"></use>
                    </svg>
                    <div class="name">集团</div>
                    <div class="fontclass">#icon-jituan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuzuzhi"></use>
                    </svg>
                    <div class="name">虚组织</div>
                    <div class="fontclass">#icon-xuzuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpiyushezhi"></use>
                    </svg>
                    <div class="name">审批语设置</div>
                    <div class="fontclass">#icon-shenpiyushezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-morenshezhi"></use>
                    </svg>
                    <div class="name">默认设置</div>
                    <div class="fontclass">#icon-morenshezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jituancaiwuhebing"></use>
                    </svg>
                    <div class="name">集团财务合并</div>
                    <div class="fontclass">#icon-jituancaiwuhebing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dailirenshezhi"></use>
                    </svg>
                    <div class="name">代理人设置</div>
                    <div class="fontclass">#icon-dailirenshezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-changyongshuju"></use>
                    </svg>
                    <div class="name">常用数据</div>
                    <div class="fontclass">#icon-changyongshuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danticaiwubaobiao"></use>
                    </svg>
                    <div class="name">单体财务报表</div>
                    <div class="fontclass">#icon-danticaiwubaobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jituanbaobiao"></use>
                    </svg>
                    <div class="name">集团报表</div>
                    <div class="fontclass">#icon-jituanbaobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang1"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi1"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gerenpeizhi"></use>
                    </svg>
                    <div class="name">个人配置</div>
                    <div class="fontclass">#icon-gerenpeizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghushezhi"></use>
                    </svg>
                    <div class="name">账户设置</div>
                    <div class="fontclass">#icon-zhanghushezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">#icon-saoyisao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rilizuixin"></use>
                    </svg>
                    <div class="name">日历最新</div>
                    <div class="fontclass">#icon-rilizuixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-canzhaozuixin"></use>
                    </svg>
                    <div class="name">参照最新</div>
                    <div class="fontclass">#icon-canzhaozuixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanwufangan"></use>
                    </svg>
                    <div class="name">暂无方案</div>
                    <div class="fontclass">#icon-zanwufangan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuding"></use>
                    </svg>
                    <div class="name">图钉</div>
                    <div class="fontclass">#icon-tuding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luzhi"></use>
                    </svg>
                    <div class="name">录制</div>
                    <div class="fontclass">#icon-luzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhi"></use>
                    </svg>
                    <div class="name">组织</div>
                    <div class="fontclass">#icon-zuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luzhizhong"></use>
                    </svg>
                    <div class="name">录制中</div>
                    <div class="fontclass">#icon-luzhizhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengbiaobianji"></use>
                    </svg>
                    <div class="name">整表编辑2</div>
                    <div class="fontclass">#icon-zhengbiaobianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengbiaobianji1"></use>
                    </svg>
                    <div class="name">整表编辑1</div>
                    <div class="fontclass">#icon-zhengbiaobianji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanyt"></use>
                    </svg>
                    <div class="name">切换yt</div>
                    <div class="fontclass">#icon-qiehuanyt</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
